<template>
  <div>
    <a-modal
            title="新增房产"
            :width="1000"
            :visible="visible"
            :confirmLoading="confirmLoading"
            @cancel="handleCancel"
            footer=''>
      <div>
        <a-steps :current="current" v-show="false">
          <a-step v-for="item in steps" :key="item.title" :title="item.title" />
        </a-steps>
        <div class="steps-content">
          <div v-show="current === 0">
            <a-tabs :activeKey="first_tab" @change="activeKeyChange">
              <a-tab-pane key="1" tab="集中式">
                <a-form-model ref="refRuleForm1" :model="ruleForm1" :rules="rules1" v-bind="layout">
                  <a-form-model-item v-show="false"><a-input v-model="ruleForm1.id"/></a-form-model-item>
                  <a-form-model-item v-show="false"><a-input v-model="ruleForm1.category"/></a-form-model-item>
                  <h2>房產信息</h2>
                  <a-form-model-item has-feedback label="房產名" prop="name">
                    <a-input v-model="ruleForm1.name" placeholder="请输入公寓名" />
                  </a-form-model-item>
                  <a-form-model-item has-feedback label="房產地址" prop="address">
                    <a-input v-model="ruleForm1.address" placeholder="请输入房產地址" />
                  </a-form-model-item>
                  <a-form-model-item has-feedback label="房產類型" prop="houseType">
                    <a-select v-model="ruleForm1.houseType" placeholder="请选择房產類型">
                      <a-select-option v-for="(item,index) in houseTypeData" :key="index" :value="item.code">{{ item.name }}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <a-form-model-item has-feedback label="電梯樓梯配置" prop="elevator">
                    <a-radio-group v-model="ruleForm1.elevator">
                      <a-radio  key="0" :value="1">電梯</a-radio>
                      <a-radio  key="1" :value="2">樓梯</a-radio>
                    </a-radio-group>
                  </a-form-model-item>
                  <a-divider/>
                  <a-form-model-item has-feedback label="負責人" prop="principal">
                    <a-input v-model="ruleForm1.principal" placeholder="请输入負責人" />
                  </a-form-model-item>
                  <a-form-model-item has-feedback label="聯係電話" prop="phone">
                    <a-input v-model="ruleForm1.phone" placeholder="请输入聯係電話" />
                  </a-form-model-item>
                  <a-divider />
                  <h2>房間信息</h2>
                  <a-form-model-item label="樓層數">
                    <a-select  v-model="ruleForm1.floors">
                      <a-select-option v-for="(item,index) in 99" :key="index" :value="item">{{ item }}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <a-form-model-item label="每層房間數">
                    <a-select v-model="ruleForm1.rooms">
                      <a-select-option v-for="(item,index) in 99" :key="index" :value="item">{{ item }}</a-select-option>
                    </a-select>每層大概房間數，稍後可進行增減
                  </a-form-model-item>
                  <a-form-model-item label="房號前綴" has-feedback>
                    <a-input placeholder="A1018(A=前綴)" v-model="ruleForm1.roompre"/>前綴在保存房產后自動加到房間號前面
                  </a-form-model-item>
                  <a-form-model-item label="房號后缀" has-feedback>
                    <a-input placeholder="A1018(8=后綴)" v-model="ruleForm1.roomsuf"/>后綴在保存房產后自動加到房間號后面
                  </a-form-model-item>
                </a-form-model>
              </a-tab-pane>
              <a-tab-pane key="2" tab="分散式">
                <a-form-model ref="refRuleForm2" :model="ruleForm2" :rules="rules2" v-bind="layout">
                  <a-form-model-item v-show="false"><a-input v-model="ruleForm2.id"/></a-form-model-item>
                  <a-form-model-item v-show="false"><a-input v-model="ruleForm2.category"/></a-form-model-item>
                  <h2>房產信息</h2>
                  <a-form-model-item has-feedback label="房產名" prop="name">
                    <a-input v-model="ruleForm2.name" placeholder="请输入公寓名" />
                  </a-form-model-item>
                  <a-form-model-item has-feedback label="房產地址" prop="address">
                    <a-input v-model="ruleForm2.address" placeholder="请输入房產地址" />
                  </a-form-model-item>
                  <a-form-model-item has-feedback label="房產類型" prop="houseType">
                    <a-select v-model="ruleForm2.houseType" placeholder="请选择房產類型">
                      <a-select-option v-for="(item,index) in houseTypeData" :key="index" :value="item.code">{{ item.name }}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <a-divider/>
                  <a-form-model-item has-feedback label="負責人" prop="principal">
                    <a-input v-model="ruleForm2.principal" placeholder="请输入負責人" />
                  </a-form-model-item>
                  <a-form-model-item has-feedback label="聯係電話" prop="phone">
                    <a-input v-model="ruleForm2.phone" placeholder="请输入聯係電話" />
                  </a-form-model-item>
                  <a-row :gutter="24">
                    <a-col :md="24" :sm="24">
                      <a-form-model-item
                        label="房間信息">
                        <a-table
                          size="middle"
                          :columns="columns"
                          :dataSource="roomData"
                          :pagination="false"
                          :loading="memberLoading"
                        >
                          <template v-for="(col,index) in ['code','elevator']" :slot="col" slot-scope="text, record">
                            <template v-if="index == 0" >
                              <a-input :key="col" style="width: 100%"  @change="e => handleChange(e,record.key,col)" placeholder="A1018(8=后綴)" />
                            </template>
                            <template v-if="index == 1">
                              <a-select
                                :key="col"
                                :default-value="1"
                                v-if="record.editable"
                                style="width: 100%"
                                placeholder="请选择"
                                @change="e => handleChange(e,record.key,col)"
                                has-feedback
                              >
                                <a-select-option  :key="0" :value="1">電梯</a-select-option>
                                <a-select-option  :key="1" :value="2">樓梯</a-select-option>
                              </a-select>
                            </template>
                          </template>
                          <template slot="operation" slot-scope="text, record">
                            <a @click="remove(record.key)">删除</a>
                          </template>
                        </a-table>
                        <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newMember">增行</a-button>
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                </a-form-model>
              </a-tab-pane>
            </a-tabs>
          </div>
          <div v-show="current === 1">
            <p class="room_item_ti">確認房間</p>
            <p class="room_item_ti">取消選擇將不添加對應樓層或房間</p>
            <p class="room_item_ti">
              <a-checkbox
               :checked="roomALLCheckbox"
              @click="roomALLCheckboxs()">
                全選
              </a-checkbox>
            </p>
            <a-divider />
            <a-row
             :gutter="24"
             v-for="(item,index) in listRoomData"
             :key="index">
              <div
              class="room_item_lis">
                <p>
                  <a-checkbox
                   :checked="item.checked"
                  @click="roomFloorCheckbox(0,item.index)">
                  {{ item.floor }}樓
                  </a-checkbox>
                </p>
                <a-checkbox
                 v-for="(i,index) in item.data"
                 :key="index"
                  class="bt-tt"
                 :class="i.checked ? 'check_box_active' : 'check_box'"
                :checked="i.checked"
                @click="roomCheckbox(0,i.pindex, i.index)">
                    {{ i.code }}
                </a-checkbox>
                <a-button
                 class="roomadd"
                 icon="plus"
                @click="roomAddItem(item.index)" />
              </div>
            </a-row>
          </div>
          <div v-show="current === 2">
            <p>设置房间信息</p>
            <p>不同的房间可以选择不同的户型，面积，租金，家私配置</p>
            <div class="divider-content-only divider-content-center-only">
              <div style="margin-bottom:6px">
                <a-divider type="vertical" class="divider-only"/>戶型&面積
                <a-button type="primary"  icon="plus" @click="addHxMj()">增加</a-button>
              </div>
              <div>
                <a-form-model>
                  <a-row :gutter="24">
                    <a-col :md="24" :sm="24">
                      <a-form-model-item
                        label="房間信息">
                        <a-table
                          size="middle"
                          :columns="hxmjcolumns"
                          :dataSource="listRoomShowData"
                          :pagination="false">
                          <a slot="roomTypeName" slot-scope="text">{{ text }}</a>
                          <a slot="area" slot-scope="text">{{ text }}</a>
                          <a slot="code" slot-scope="text">{{ text }}</a>
                          <template slot="operation" slot-scope="text, record">
                            <a @click="hxmjupdate(record)">修改</a>
                            <a @click="hxmjremove(record.hxmjshowkey)">删除</a>
                          </template>
                        </a-table>
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                </a-form-model>
              </div>
              <a-divider />
              <a-divider type="vertical" class="divider-only"/>配置費用
              <a-button type="primary"  icon="plus" @click="addpzfy()">增加</a-button>
              <a-divider />
              <a-divider type="vertical" class="divider-only"/>家私配置
              <a-button type="primary"  icon="plus" @click="addjspz()">增加</a-button>
              <a-divider />
            </div>
            </div>
        </div>
        <div class="steps-action">
          <a-row type="flex" justify="center" align="top">
            <a-col :span="12">
              <div>
                <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">上一步</a-button>
                <a-button v-if="current < steps.length - 1" type="primary" @click="next">下一步 </a-button>
                <a-button
                        v-if="current == steps.length - 1"
                        type="primary"
                @click="$message.success('Processing complete!')">保存</a-button>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
    </a-modal>
    <a-modal
      title="戶型&面積"
      :width="600"
      :closable='false'
      :visible="hxMjVis"
      @ok="handlehxMjSubmit"
      @cancel="handlehxMjCancel">
        <a-form :form="formhxMj">
                <a-form-item
                    label="戶型"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-select style="width: 100%" placeholder="请选择戶型" v-decorator="['roomType', {rules: [{ required: true, message: '请选择房產類型！' }]}]">
                      <a-select-option v-for="(item,index) in roomTypeData" :key="index" :value="item.id">{{ item.name }}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item
                  label="房間面積"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol">
                  <a-input-number :min="0" :max="10000" :precision="2" :step="0.01" v-decorator="['area', { initialValue: 0.00, rules: [{required: true, message: '请输入房間面積'}]}]"/>平米
                </a-form-item>
            </a-form>
            <h3>選擇應用的房號:</h3>
            <a-row
             :gutter="24"
             v-for="(item,index) in listRoomData"
             :key="index">
              <div
              class="room_item_lis">
                <p>
                  <a-checkbox
                   :checked="item.hxmjchecked"
                   v-if="item.checked"
                  @click="roomFloorCheckbox(1,item.index)">
                  {{ item.floor }}樓
                  </a-checkbox>
                </p>
                <span
                  v-for="(i,index) in item.data"
                  :key="index">
                  <a-checkbox
                  v-if="i.checked"
                  :disabled="i.hxmjdisabled"
                  class="bt-tt"
                  :class="i.hxmjchecked ? 'check_box_active' : 'check_box'"
                  :checked="i.hxmjchecked"
                  @click="roomCheckbox(1,i.pindex, i.index)">
                      {{ i.code }}
                  </a-checkbox>
                </span>
              </div>
            </a-row>
      </a-modal>
  </div>
</template>
<script>
  import { getHxList } from '@/api/modular/main/busrealestate/busRealEstateManage'
  export default {
        data () {
          return {
            ruleForm1: {
              id: '',
              category: '1', // 房产类别 （字典 1集中式 2分散式 ）
              name: '',
              address: '',
              houseType: '1', // 房产类型
              elevator: 1, // 电梯配置
              principal: '', // 负责人
              phone: '', // 联系电话
              floors: 6, // 楼层数
              rooms: 5, // 房间数
              roompre: '', // 前缀
              roomsuf: '', // 后缀
              floor: [] // 楼层
            },
            rules1: {
              name: [
                { required: true, message: '请输入公寓名!', trigger: 'change' }
              ],
              address: [
                { required: true, message: '请输入房產地址!', trigger: 'change' }
              ],
              houseType: [
                { required: true, message: '请选择房產類型!', trigger: 'change' }
              ]
            },
            ruleForm2: {
              id: '',
              category: '2', // 房产类别 （字典 1集中式 2分散式 ）
              name: '',
              address: '',
              houseType: '1', // 房产类型
              principal: '', // 负责人
              phone: '', // 联系电话
              room: [] // 房间列表
            },
            rules2: {
              name: [
                { required: true, message: '请输入公寓名!', trigger: 'change' }
              ],
              address: [
                { required: true, message: '请输入房產地址!', trigger: 'change' }
              ],
              houseType: [
                { required: true, message: '请选择房產類型!', trigger: 'change' }
              ]
            },
            // 房间数据
            roomData: [],
            formhxMj: this.$form.createForm(this), // 戶型面積
            // 第一步tab索引
            first_tab: '1',
            // 步骤索引
            current: 0,
            // 步骤设置
            steps: [
              {
                title: '房產設置',
                content: 1
              },
              {
                title: '確認房間',
                content: 2
              },
              {
                title: '房間設置',
                content: 3
              }
            ],
            // 机构行样式
            layout_JG: {
              labelCol: {
                xs: { span: 24 },
                sm: { span: 3 }
              },
              wrapperCol: {
                xs: { span: 24 },
                sm: { span: 20 }
              }
            },
            layout: {
              labelCol: {
                xs: { span: 24 },
                sm: { span: 5 }
              },
              wrapperCol: {
                xs: { span: 24 },
                sm: { span: 15 }
              }
            },
            labelCol: {
              xs: { span: 24 },
              sm: { span: 5 }
            },
            wrapperCol: {
              xs: { span: 24 },
              sm: { span: 15 }
            },
            visible: false,
            confirmLoading: false,
            columns: [
              {
                title: '房間號',
                dataIndex: 'code',
                width: '45%',
                scopedSlots: { customRender: 'code' }
              },
              {
                title: '電梯樓梯選擇',
                dataIndex: 'elevator',
                width: '45%',
                scopedSlots: { customRender: 'elevator' }
              },
              {
                title: '操作',
                key: 'action',
                scopedSlots: { customRender: 'operation' }
              }
            ],
            roomTypeData: [],
            hxmjcolumns: [
              {
                title: '戶型',
                dataIndex: 'roomTypeName',
                width: '20%',
                scopedSlots: { customRender: 'roomType' }
              },
              {
                title: '面積',
                dataIndex: 'area',
                width: '20%',
                scopedSlots: { customRender: 'area' }
              },
              {
                title: '房間號',
                dataIndex: 'code',
                width: '45%',
                scopedSlots: { customRender: 'code' }
              },
              {
                title: '操作',
                key: 'action',
                width: '15%',
                scopedSlots: { customRender: 'operation' }
              }
            ],
            roomALLCheckbox: true,
            listRoomData: [],
            listRoomDataTrue: [],
            listRoomShowData: [],
            memberLoading: false,
            houseTypeData: [],
            hxMjVis: false,
            pzfyVis: false,
            jspzVis: false,
            activeKeyhxmj: ['1']
          }
        },
        created() {
          this.loadData()
        },
        methods: {
          // 初始化方法
          add () {
            this.visible = true
          },
          loadData() {
            const bedroomsOption = this.$options
            this.houseTypeData = bedroomsOption.filters['dictData']('house_type')
          },
          // 关闭弹窗
          handleCancel () {
            this.visible = false
          },
          // 下一步
          next() {
           if (this.first_tab === '2') {
              this.$refs.refRuleForm2.validate(valid => {
                if (valid) {
                  if (this.roomData.length !== 0 && this.roomData[0].code) {
                      this.current = 2
                  } else {
                      this.$message.warning('請至少填寫一個房間號！')
                  }
                }
              })
            } else {
              this.$refs.refRuleForm1.validate(valid => {
                if (valid) {
                  if (this.current === 0) {
                     this.createFloorAndRoom(this.ruleForm1.floors, this.ruleForm1.rooms)
                  }
                  this.current++
                }
              })
            }
          },
          // 上一步
          prev() {
            if (this.first_tab === '2') {
              this.current = 0
            } else {
              this.current--
            }
          },
          resetForm(formName) {
            this.$refs[formName].resetFields()
          },
          // 第一步tab点击
          activeKeyChange(key) {
            if (key === '1') {
               this.$refs.refRuleForm2.resetFields()
               this.roomData = []
            } else {
               this.$refs.refRuleForm1.resetFields()
            }
            this.first_tab = key
          },
           /**
           * 增行
           */
          newMember () {
            const length = this.roomData.length
            this.roomData.push({
              key: length === 0 ? '1' : (parseInt(this.roomData[length - 1].key) + 1).toString(),
              code: '',
              elevator: '',
              editable: true,
              isNew: true
            })
          },
          /**
           * 删除
           */
          remove (key) {
            const newData = this.roomData.filter(item => item.key !== key)
            this.roomData = newData
          },
          /**
           * 选择子表单单项触发
           */
          handleChange (value, key, column) {
            const newData = [...this.roomData]
            const target = newData.find(item => key === item.key)
            if (target) {
              target[column] = value
              this.roomData = newData
            }
          },
          hxmjhandleChange (value, key, column) {
            const newData = [...this.listRoomDataTrue]
            const target = newData.find(item => key === item.key)
            if (target) {
              target[column] = value
              this.listRoomDataTrue = newData
            }
          },
          // 集中式房产创建房间
          createFloorAndRoom(floors, rooms) {
            var arrfloors = []
            for (var i = 0; i < floors; i++) {
                arrfloors.push({ floor: i + 1, checked: true, hxmjchecked: false, index: i, data: [] })
                for (var m = 0; m < rooms; m++) {
                  arrfloors[i].data.push(
                    { elevator: i + 1, code: (i + 1) * 100 + (m + 1), checked: true, hxmjchecked: false, hxmjdisabled: false, hxmjconfiged: false, hxmjshowkey: '', roomType: '', area: '', roomTypeName: '', pindex: i, index: m }
                  )
                }
            }
            this.listRoomData = arrfloors
          },
          // 集中式房产全选房间按钮
          roomALLCheckboxs() {
            this.roomALLCheckbox = !this.roomALLCheckbox
            const ary = this.listRoomData
            for (const key in ary) {
              this.listRoomData[key].checked = this.roomALLCheckbox
              const aryitem = this.listRoomData[key].data
              for (const keyItem in aryitem) {
                this.listRoomData[key].data[keyItem].checked = this.roomALLCheckbox
              }
            }
          },
          // 楼层全选按钮
          roomFloorCheckbox(type, index) {
            if (type === 0) {
              this.listRoomData[index].checked = !this.listRoomData[index].checked
              const ary = this.listRoomData[index].data
              for (const key in ary) {
                this.listRoomData[index].data[key].checked = this.listRoomData[index].checked
              }
            } else if (type === 1) {
              this.listRoomData[index].hxmjchecked = !this.listRoomData[index].hxmjchecked
              const ary = this.listRoomData[index].data
              for (const key in ary) {
                this.listRoomData[index].data[key].hxmjchecked = this.listRoomData[index].hxmjchecked
              }
            }
          },
          // 单选按钮
          roomCheckbox(type, pindex, index) {
            if (type === 0) {
              this.listRoomData[pindex].data[index].checked = !this.listRoomData[pindex].data[index].checked
              var itmlen = this.listRoomData[pindex].data.length
              var unchecked = 0
              const ary = this.listRoomData[pindex].data
              for (const key in ary) {
                if (!this.listRoomData[pindex].data[key].checked) {
                  unchecked = unchecked + 1
                }
              }
              if (unchecked === itmlen) {
                this.listRoomData[pindex].checked = !this.listRoomData[pindex].checked
              } else {
                this.listRoomData[pindex].checked = true
              }
            } else if (type === 1) {
              this.listRoomData[pindex].data[index].hxmjchecked = !this.listRoomData[pindex].data[index].hxmjchecked
              var itmlenhxmj = this.listRoomData[pindex].data.length
              var uncheckedhxmj = 0
              const ary = this.listRoomData[pindex].data
              for (const key in ary) {
                if (!this.listRoomData[pindex].data[key].hxmjchecked) {
                  uncheckedhxmj = uncheckedhxmj + 1
                }
              }
              if (uncheckedhxmj === itmlenhxmj) {
                this.listRoomData[pindex].hxmjchecked = !this.listRoomData[pindex].hxmjchecked
              } else {
                this.listRoomData[pindex].hxmjchecked = true
              }
            }
          },
          // 房间增加按钮
          roomAddItem(index) {
            var jjsi = this.listRoomData[index].data.length
            this.listRoomData[index].data.push({ elevator: index + 1, code: (index + 1) * 100 + jjsi + 1, checked: true, hxmjchecked: false, hxmjdisabled: false, roomType: '', area: '', roomTypeName: '', pindex: index, index: jjsi })
          },
          // 添加户型面积弹窗打开
          addHxMj() {
            this.hxMjVis = true
            this.getHxLists()
          },
          // 查询户型列表数据
          getHxLists() {
            getHxList().then((res) => {
              if (res.code === 200) {
                this.roomTypeData = res.data
              } else {
                this.$message.error('查詢失敗')//  + res.message
              }
            })
          },
          // 户型面积确定按钮
          handlehxMjSubmit () {
            const { formhxMj: { validateFields } } = this
              validateFields((errors, values) => {
                if (!errors) {
                  if (this.checkHxMjChecked(values.roomType, values.area)) {
                    this.hxMjVis = !this.hxMjVis
                  } else {
                    this.$message.warning('請選擇房間號！')
                  }
                }
            })
          },
          // 房间数据补齐
          checkHxMjChecked (roomType, area) {
            const ary = this.listRoomData
            const roomTypeName = this.roomTypeFilter(roomType)
            var checkHxMjCheckedbool = false
            const codes = []
            const hxmjshowkey = this.generateUUID()
            for (const key in ary) {
              if (this.listRoomData[key].checked && this.listRoomData[key].hxmjchecked) {
                const aryitem = this.listRoomData[key].data
                for (const keyItem in aryitem) {
                  if (this.listRoomData[key].data[keyItem].checked && this.listRoomData[key].data[keyItem].hxmjchecked && !this.listRoomData[key].data[keyItem].hxmjconfiged) {
                    checkHxMjCheckedbool = true
                    this.listRoomData[key].data[keyItem].roomType = roomType
                    this.listRoomData[key].data[keyItem].roomTypeName = roomTypeName
                    this.listRoomData[key].data[keyItem].area = area
                    this.listRoomData[key].data[keyItem].hxmjdisabled = true
                    this.listRoomData[key].data[keyItem].hxmjconfiged = true
                    this.listRoomData[key].data[keyItem].hxmjshowkey = hxmjshowkey
                    codes.push(this.listRoomData[key].data[keyItem].code)
                  }
                }
              }
            }
            if (checkHxMjCheckedbool) {
              this.listRoomShowData.push({ area: area, roomTypeName: roomTypeName, code: codes.toString(), hxmjshowkey: hxmjshowkey })
            }
            return checkHxMjCheckedbool
          },
          /**
           *获取id
          */
          generateUUID() {
              var d = new Date().getTime()
              if (window.performance && typeof window.performance.now === 'function') {
                  d += performance.now()
              }
              var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                  var r = (d + Math.random() * 16) % 16 | 0
                  d = Math.floor(d / 16)
                  return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
              })
              return uuid
          },
          roomTypeFilter (id) {
            // eslint-disable-next-line eqeqeq
            const values = this.roomTypeData.filter(item => item.id == id)
            if (values.length > 0) {
              return values[0].name
            }
          },
          hxmjremove(hxmjshowkey) {
            const newData = this.listRoomShowData.filter(item => item.hxmjshowkey !== hxmjshowkey)
            this.listRoomShowData = newData
            const ary = this.listRoomData
            for (const key in ary) {
              if (this.listRoomData[key].checked && this.listRoomData[key].hxmjchecked) {
                const aryitem = this.listRoomData[key].data
                for (const keyItem in aryitem) {
                  // if (this.listRoomData[key].data[keyItem].checked && this.listRoomData[key].data[keyItem].hxmjchecked && this.listRoomData[key].data[keyItem].hxmjconfiged) {
                  if (this.listRoomData[key].data[keyItem].hxmjshowkey === hxmjshowkey) {
                    this.listRoomData[key].data[keyItem].hxmjchecked = false
                    this.listRoomData[key].data[keyItem].hxmjdisabled = false
                    this.listRoomData[key].data[keyItem].hxmjconfiged = false
                    this.listRoomData[key].data[keyItem].hxmjshowkey = ''
                  }
                }
              }
            }
            console.log(JSON.stringify(this.listRoomDataTrue))
          },
          // 关闭户型面积弹窗
          handlehxMjCancel () {
            this.hxMjVis = false
          }
        }
      }
</script>
<style lang="less">
 .steps-content {
  border-radius: 6px;
  min-height: 500px;
}
.steps-action {
  margin-top: 0px 24px;
  margin-bottom: 20px;
  min-height: 50px;
}
.bt-tt{
  padding: 10px;
  margin-left: 8px;
}
.check_box{
  border: solid 1px rgb(241, 238, 238);
}
.check_box_active{
  border: solid 1px rgb(109, 185, 236);
}
.room_item_lis{
  padding:10px 30px;
}
.room_item_ti{
  padding:0px 10px;
  margin: 5px;
}
.roomadd{
  border: solid 1px rgb(109, 185, 236);
  color: rgb(109, 185, 236);
  height: 40px;
  width: 40px;
  margin-left: 10px;
}
.divider-only{
    background-color: aqua;
    width: 2px;
    height: 1.2em;
  }
  .divider-content-only{
    margin-bottom: 5px;
  }
  .divider-content-center-only{
      margin-top: 5px;
  }
  .ant-modal-body{
    padding: 0px 20px;
  }
</style>
